<template>
	<a-card class="qushi-container">
		<div class="qushi-tongji">
			<div class="line1">
				<img class="task-icon" :src="TaskIcon" />
				<div class="task-num">
					<p class="title">总任务</p>
					<p>
						<span class="num">{{qdata.data01}}</span>
						<span class="util">个</span>
					</p>
				</div>
				<a-button class="show-all" size="small" type="link" @click="toBillSearch">查看全部</a-button>
			</div>
			<div class="line2 num-items">
				<div class="num-item">
					<span class="num dks">{{qdata.data02}}</span>
					<span class="txt">待开始</span>
				</div>
				<div class="num-item">
					<span class="num jxz">{{qdata.data03}}</span>
					<span class="txt">进行中</span>
				</div>
				<div class="num-item">
					<span class="num ywc">{{qdata.data04}}</span>
					<span class="txt">已完成</span>
				</div>
				<div class="num-item">
					<span class="num yjs">{{qdata.data05}}</span>
					<span class="txt">已结束</span>
				</div>
			</div>
		</div>
		<div class="repair-report">
			<div class="report-title-box">
				<span class="title">派工趋势图</span>
				<span class="unit">单位：万件</span>
			</div>
			<div class="echarts-box">
				<div id="paigong_qushi" class="paigong-qushi"></div>
			</div>
		</div>
	</a-card>
</template>
<script setup>
	import * as echarts from 'echarts';
	import { onMounted, watch, reactive } from 'vue';
	import { useRouter } from 'vue-router';
	import TaskIcon from '@/assets/images/repair/task.png';
	
	const router = useRouter();
	let option = reactive({});
	const props = defineProps({
		qdata: {
			type: Object,
			default: {},
		}
	});
	onMounted(() => {
		init();
	});
	let color = ['#165DFF', '#1EE7FF'];
	let xAxisData = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']; 
	const hexToRgba = (hex, opacity) => {
		let rgbaColor = '';
		let reg = /^#[\da-f]{6}$/i;
		if (reg.test(hex)) {
			rgbaColor = `rgba(${parseInt('0x' + hex.slice(1, 3))},${parseInt('0x' + hex.slice(3, 5))},${parseInt(
				'0x' + hex.slice(5, 7)
			)},${opacity})`;
		}
		return rgbaColor;
	};

	function init() {
		if(!props.qdata.data06){
			return
		}
		option = {
			backgroundColor: '#fff',
			color: color,
			legend: {
				top: 0,
                right:0,
			},
			tooltip: {
				trigger: 'axis',
				formatter: function (params) {
					let html = '';
					params.forEach((v) => {
						html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
					color[v.componentIndex]
				};"></span>${v.seriesName}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px;margin-left:5px">${v.value}</span>件`;
					});
					return html;
				},
				extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
				axisPointer: {
					type: 'line',
					lineStyle : {
						color: '#C9CDD4',
					},
				},
			},
			grid: {
				top: 50,
                bottom:0,
                left:0,
                right:10,
				containLabel: true,
			},
			xAxis: [
				{
					type: 'category',
					boundaryGap: false,
					axisLabel: {
						formatter: '{value}',
						textStyle: {
							color: '#333',
						},
					},
					axisLine: {
						lineStyle: {
							type: 'dashed',
							color: '#E5E6EB',
						},
					},
					data: xAxisData,
				},
			],
			yAxis: [
				{
					type: 'value',
					axisLabel: {
						textStyle: {
							color: '#666',
						},
					},
					nameTextStyle: {
						color: '#666',
						fontSize: 12,
						lineHeight: 40,
					},
					// 分割线
					splitLine: {
						lineStyle: {
							type: 'dashed',
							color: '#E5E6EB',
						},
					},
					axisLine: {
						show: false,
					},
					axisTick: {
						show: false,
					},
				},
			],
			series: [
				{
					name: props.qdata.data06.thisYear+'年派工',
					type: 'line',
					smooth: true,
					symbolSize: 3,
					zlevel: 3,
                    cursor: "pointer",
					lineStyle: {
						normal: {
							color: color[0],
							shadowBlur: 5,
							shadowColor: hexToRgba(color[0], 0.5),
							shadowOffsetY: 10,
						},
					},
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color: hexToRgba(color[0], 0.2),
									},
									{
										offset: 1,
										color: hexToRgba(color[0], 0.1),
									},
								],
								false
							),
							shadowColor: hexToRgba(color[0], 0.1),
							shadowBlur: 10,
						},
					},
					data: props.qdata.data06.thisData,
				},
				{
					name: props.qdata.data06.lastYear+'年派工',
					type: 'line',
					smooth: true,
					symbolSize: 3,
					zlevel: 3,
                    cursor: "pointer",
					lineStyle: { 
						normal: {
							color: color[1],
							shadowBlur: 5,
							shadowColor: hexToRgba(color[1], 0.5),
							shadowOffsetY: 10,
						},
					}, 
					areaStyle: {
						normal: {
							color: new echarts.graphic.LinearGradient(
								0,
								0,
								0,
								1,
								[
									{
										offset: 0,
										color: hexToRgba(color[1], 0.2),
									},
									{
										offset: 1,
										color: hexToRgba(color[1], 0.1),
									},
								],
								false
							),
							shadowColor: hexToRgba(color[1], 0.1),
							shadowBlur: 10,
						},
					},
					data: props.qdata.data06.lastData,
				},
			],
		};
		let chartDom = document.getElementById('paigong_qushi');
		if (chartDom) {
			let myChart = echarts.init(chartDom);
			option && myChart.setOption(option);
		}
	};
	const toBillSearch = function(){
		router.push({
			path: '/work/gdcx'
		});
	};

	watch(
		() => props.qdata,
		() => {
			init();
		}
	);
</script>
<style lang="less" scoped>
	.qushi-container {
		height: 500px;
		.line1 {
			text-align: center;
			.task-icon {
				width: 40px;
				height: 40px;
				vertical-align: text-bottom;
			}
			.task-num {
				margin-left: 8px;
				display: inline-block;
				.title {
					color: #1d2129;
					font-size: 12px;
					margin: 0;
				}
				.num {
					color: #165dff;
					font-size: 26px;
				}
				.util {
					color: '#4E5969';
					font-size: 12px;
					margin-left: 2px;
				}
			}
			.show-all {
				margin-left: 48px;
				vertical-align: super;
			}
		}
		.line2.num-items {
			display: flex;
			flex-flow: row;
			justify-content: center;
			padding-bottom: 16px;
			border-bottom: 1px dotted #CCCCCC;
			margin-bottom: 16px;
			.num-item {
				width: 22%;
				text-align: center;
				.num {
					display: block;
					font-size: 22px;
					font-weight: 600;
					&.dks,
					&.jxz {
						color: #f77234;
					}
					&.ywc {
						color: #07c160;
					}
					&.yjs {
						color: #4e5969;
					}
				}
				.txt {
					font-size: 12px;
					color: #4e5969;
				}
			}
		}
		.repair-report {
			margin: 4px 0 16px;
			.report-title-box {
				.title {
					color: @fb-color;
					font-weight: 700;
					font-size: 16px;
				}
				.unit {
					float: right;
					color: @fg-color;
					font-size: 12px;
				}
			}
		}
		.echarts-box {
			display: flex;
			align-items: center;
			justify-content: center;
			.paigong-qushi {
				width: 100%;
				height: 260px;
				background: #fff;
			}
		}
	}
</style>
